import { ref, reactive, type FunctionalComponent as FC, computed } from 'vue';
import { IconPlus, IconDelete } from '@arco-design/web-vue/es/icon';
import type {
  ProjectDetailStateForm,
  ViewAnnoUserSetting,
  SeriesDataItem,
} from '@/store/modules/projectDetail/type';
import { LoginRes } from '@/api/user/user.d';
import * as ApiTypes from '@/api/project/project.d';
import '../styles/stepForm.less';
import '../styles/third.less';
interface Prop {
  id: string;
  layout: string;
  status: string;
  type: 'create' | 'update';
  disabled: boolean;
  form: ViewAnnoUserSetting;
  commonList: ApiTypes.CommonConfigResponse;
  compList: ApiTypes.CompConfigItem[];
  compTotal: number;
  toolList: ApiTypes.ToolConfigItem[];
  lesionList: ApiTypes.LesionConfigItem[];
  watchFormData: Function;
  getFormLeisonDataList: Function;
  clearLesionList: Function;
  getCompData: Function;
  getCompDialog: Function;
  sortAlertTableData: Function;
  clearAlertTableData: Function;
  setSelectCheckAll: Function;
  clearSelectCheckAll: Function;
  delCompAlertData: Function;
  delLesionData: Function;
  changeBizType: Function;
  existedName: Function;
  userTotal: number;
  userList: LoginRes[];
  getUserList: Function;
  companyList: ApiTypes.CompanyConfigItem[];
  addAnnoUserList: Function;
  clearAnnoUserList: Function;
  delAnnoUserList: Function;
  getUserDataList: Function;
}
const pubMethodOptions = [
  { value: 1, name: '开放式' },
  { value: 2, name: '承包式' },
];

const assignMethodOptions = [
  { value: 1, name: '抢单式' },
  { value: 2, name: '交叉式' },
];
const showUserVal = ref('');
const ThirdStep: FC<Prop, any> = (props, ctx) => {
  console.log(props, 'ThirdStep');
  if (props.userTotal !== 0) {
    // 设置可参与人数值
    showUserVal.value = '共' + props.userTotal + '人可参与标注';
  }
  const handleChange = (value: number) => {
    if (value === 1) {
      props.clearAnnoUserList();
    }
    if (value === 2) {
      props.addAnnoUserList();
    }
  };
  const handleClick = () => {
    props.addAnnoUserList();
  };
  const handleDel = (i: number) => {
    props.delAnnoUserList(i);
  };
  const handleCompanyChange = (value: number) => {
    props.getUserDataList(value);
  };
  return (
    <div class="step-form-container">
      <div class="anno-time-content">
        <a-form-item
          field="annoUserSetting.beginDate"
          label="开始时间"
          required
          disabled={props.disabled}
          label-col-props={{ span: 1.5 }}
          wrapper-col-props={{ span: 15 }}
        >
          <a-date-picker
            v-model={props.form.beginDate}
            placeholder="请选择"
            style="width: 272px;height: 32px"
          />
        </a-form-item>
        <a-form-item
          field="annoUserSetting.endDate"
          label="结束时间"
          required
          disabled={props.disabled}
        >
          <a-date-picker
            v-model={props.form.endDate}
            placeholder="请选择"
            style="width: 272px;height: 32px"
          />
        </a-form-item>
      </div>
      <div class="anno-methods-content">
        <a-form-item
          field="annoUserSetting.pubMethod"
          label="任务方式"
          required
          disabled={props.disabled}
          label-col-props={{ span: 1.5 }}
          wrapper-col-props={{ span: 15 }}
        >
          <a-select
            v-model={props.form.pubMethod}
            placeholder="请选择"
            style="width: 272px;height: 32px"
            onChange={handleChange}
          >
            {getOptions(pubMethodOptions)}
          </a-select>
        </a-form-item>
        <a-form-item
          field="annoUserSetting.assignMethod"
          label="任务分配方式"
          required
          disabled={props.disabled}
        >
          <a-select
            v-model={props.form.assignMethod}
            placeholder="请选择"
            style="width: 272px;height: 32px"
          >
            {getOptions(assignMethodOptions)}
          </a-select>
        </a-form-item>
        {props.form.assignMethod === 2 && (
          <a-form-item
            field="annoUserSetting.crossNum"
            label="交叉次数"
            required
            disabled={props.disabled}
          >
            <a-input-number
              v-model={props.form.crossNum}
              style="width: 272px;height: 32px"
              hide-button
              max={50}
              min={2}
            />
          </a-form-item>
        )}
      </div>
      {props.form.pubMethod === 1 && (
        <div class="open-methods-content">
          <a-form-item
            field=""
            label="可参与人数"
            disabled={true}
            label-col-props={{ span: 1.5 }}
          >
            <a-input
              v-model={showUserVal.value}
              style="width: 272px;height: 32px"
            />
          </a-form-item>
        </div>
      )}
      {props.form.pubMethod === 2 && (
        <>
          {props.form.annoUserList.map((item, index) => (
            <div class="company-item" key={item.companyId}>
              <a-form-item
                field={`annoUserSetting.annoUserList.${index}.companyId`}
                label="标注单位"
                disabled={props.disabled}
                required
                label-col-props={{ span: 1.5 }}
                wrapper-col-props={{ span: 15 }}
                rules={[
                  {
                    required: true,
                    message: `标注单位${index + 1}不能为空！`,
                  },
                ]}
              >
                <a-select
                  v-model={item.companyId}
                  placeholder="请选择所属单位"
                  style="width: 272px;height: 32px"
                  onChange={handleCompanyChange}
                >
                  {getOptions(changeCompanyData(props.companyList))}
                </a-select>
              </a-form-item>
              <a-form-item
                field={`annoUserSetting.annoUserList.${index}.userIdList`}
                label="可选名单"
                required
                disabled={props.disabled}
                rules={[
                  {
                    required: true,
                    message: `可选名单${index + 1}不能为空！`,
                  },
                ]}
              >
                <a-select
                  v-model={item.userIdList}
                  multiple
                  max-tag-count={3}
                  placeholder="请选择可选名单"
                  style="width: 228px;height: 32px"
                >
                  {getOptions(changeUserData(item.userList))}
                </a-select>
                <div class="check-user-num">{item.userIdList?.length}人</div>
              </a-form-item>
              {index !== 0 && (
                <div class="del-btn">
                  <icon-delete onClick={() => handleDel(index)} />
                </div>
              )}
            </div>
          ))}
          <div class="add-company-btn">
            <a-button type="dashed" onClick={handleClick}>
              <icon-plus />
              添加标注单位
            </a-button>
          </div>
        </>
      )}
      <div class="anno-remark-content">
        <a-form-item
          field="annoUserSetting.remark"
          label="任务备注"
          disabled={props.disabled}
          label-col-props={{ span: 1.5 }}
          wrapper-col-props={{ span: 13 }}
        >
          <a-textarea
            v-model={props.form.remark}
            auto-size={{
              minRows: 6,
              maxRows: 6,
            }}
            placeholder="任务备注"
          />
        </a-form-item>
      </div>
    </div>
  );
};

const getOptions = (data) => {
  return data.map((item) => (
    <a-option value={item.value}>{item.name}</a-option>
  ));
};

const changeCompanyData = (data) => {
  return data.map((item) => ({ value: item.id, name: item.name }));
};

const changeUserData = (data) => {
  return data.map((item) => ({ value: item.id, name: item.userName }));
};

export default ThirdStep;
